<div>
    <div class="row">
        <div class="col-lg-9">
            <h1 class="page-header">Ongoing Deployments</h1>
        </div>
    </div>

    <span us-spinner="{radius:30, width:8, length: 16}" spinner-key="ongoing-spinner"></span>
    <div class="col-lg-12 col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading apollo-form-headline">
                Running Deployments
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table" datatable="ng" dt-options="dtOptions">
                        <thead>
                        <tr>
                            <th>Last Updated</th>
                            <th>Service</th>
                            <th>Environment</th>
                            <th>Group</th>
                            <th>Initiated By</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="deployment in runningAndJustFinishedDeployments | filter:globalSearch | orderBy: 'deployment.lastUpdate': true"
                            ng-class="{'my-deployment':myDeployments.indexOf(deployment.id) > -1}">
                            <td>{{deployment.lastUpdate | date:'dd/MM/yy HH:mm:ss'}}</td>
                            <td>{{allServices[deployment.serviceId].name}}</td>
                            <td>{{allEnvironments[deployment.environmentId].name}}</td>
                            <td>{{deployment.nestedDeployments.length > 0 ? 'Yes' : 'No'}}</td>
                            <td>{{allUsers[deployment.userEmail].userEmail}}</td>
                            <td ng-if="deployment.nestedDeployments.length == 0"><span class="label" ng-class="getLabel(deployment.status)">{{deployment.status}}</span></td>
                            <td ng-if="deployment.nestedDeployments.length > 0"><span class="label label-info">
                                {{((deployment.nestedDeployments | filter:{status:'DONE'}).length + (deployment.nestedDeployments | filter:{status:'CANCELED'}).length) + ' / ' + deployment.nestedDeployments.length }}
                            </span></td>
                            <td>
                                <button ng-if="deployment.nestedDeployments.length == 0" type="button" class="btn btn-primary btn-circle" uib-tooltip="See Logs"
                                        ng-click="setSelectedDeployment(deployment) ; getContainersOfSelectedDeployment()"
                                        data-toggle="modal" data-target="#select-container">
                                    <i class="fa fa-binoculars"></i>
                                </button>
                                <button ng-if="deployment.nestedDeployments.length == 0" type="button" class="btn btn-danger btn-circle" uib-tooltip="Revert Deployment"
                                        ng-click="setSelectedDeployment(deployment)"
                                        data-toggle="modal" data-target="#confirm-revert"
                                        ng-class="getRevertClass(deployment.status)"
                                        ng-disabled="isRevertDisabledBasedOnStatus(deployment.status)">
                                    <i class="fa fa-undo"></i>
                                </button>
                                <button type="button" class="btn btn-success btn-circle" uib-tooltip="Status Per Group"
                                        ng-if="deployment.nestedDeployments.length !== 0"
                                        ng-click="setSelectedDeployment(deployment)"
                                        data-toggle="modal" data-target="#status-per-group">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button type="button" class="btn btn-circle disabled" uib-tooltip="{{deployment.deploymentMessage || 'No message was provided'}}">
                                    <i class="fa fa-comments"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="confirm-revert" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Sure?</h4>
                </div>
                <div class="modal-body">
                    This will revert your deployment. <br>
                    All of the docker will return to their previous state. <br>
                    If you want to, you will need to deploy again. <b>No way back from here.</b> <br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="revert()">Revert!</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="select-container" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Select the container you want see its logs</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="row text-center">
                            <button type="button" class="btn btn-outline btn-primary btn-lg apollo-version-selector"
                                    ng-repeat="container in selectedDeploymentContainers" ng-click="startLogsWebsocket(container)" data-toggle="modal" data-target="#select-container,#live-logs">
                                {{container}}
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="live-logs" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="stopLogsWebsocket()">×</button>
                    <h4 class="modal-title">Live tail! These are the logs from the <strong>latest created container</strong></h4>
                </div>
                <div class="modal-body">
                    <div id="terminal" class="apollo-live-session">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="stopLogsWebsocket()">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="status-per-group" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Status Per Group</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-responsive" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs">
                        <thead>
                        <tr>
                            <th>Group Name</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="deployment in selectedDeployment.nestedDeployments">
                                <td>{{deployment.groupName}}</td>
                                <td><span class="label" ng-class="getLabel(deployment.status)">{{deployment.status}}</span></td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-circle" uib-tooltip="See Logs"
                                        ng-click="setSelectedDeployment(deployment) ; getContainersOfSelectedDeploymentWithGroup()"
                                        data-toggle="modal"
                                        data-target="#select-container">
                                    <i class="fa fa-binoculars"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger btn-circle" uib-tooltip="Revert Deployment"
                                            ng-click="hideStatusPerGroupModal(); setSelectedDeployment(deployment)"
                                            data-toggle="modal" data-target="#confirm-revert"
                                            ng-class="getRevertClass(deployment.status)"
                                            ng-disabled="isRevertDisabledBasedOnStatus(deployment.status)">
                                        <i class="fa fa-undo"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
